<template>
  <div style="height: 100%">
    <el-container>
      <el-main>
        <el-tabs type="border-card">
          <el-tab-pane label="字典项列表">
            <el-card>
              <el-form ref="formRef" :model="dictForm" label-width="100px">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="字典键名" prop="k">
                      <el-input v-model="dictForm.k" placeholder="请输入字典键名" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="字典键值" prop="v">
                      <el-input v-model="dictForm.v" placeholder="请输入字典键值" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="字典类型" prop="typeId">
                      <el-select v-model="dictForm.typeId" placeholder="请选择字典类型" clearable>
                        <el-option
                          v-for="item in dictTypeList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" icon="search" @click="getdict">搜索</el-button>
                    <el-button icon="refresh" @click="resetForm">重置</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
            <el-card style="margin-top: 15px">
              <div class="toolbar" style="margin-bottom: 15px">
                <el-button type="primary" icon="plus" @click="btnUserDialog">新增</el-button>
              </div>
              <el-table :data="dictList" border>
                <el-table-column align="center" type="selection" />
                <el-table-column label="字典类型" prop="dictTypeName" align="center" />
                <el-table-column label="字典键名" prop="k" align="center" />
                <el-table-column label="字典键值" prop="v" align="center" />
                <el-table-column label="排序" prop="sort" align="center" />

                <el-table-column
                  label="创建时间"
                  :formatter="rendererDateTime"
                  prop="createTime"
                  align="center"
                />
                <el-table-column label="操作" width="200" fixed="right">
                  <template #default="{ row }">
                    <div class="sys-table-main-actions">
                      <el-link
                        icon="edit"
                        :underline="false"
                        type="primary"
                        @click="btnUserDialog(row.id)"
                        >编辑</el-link
                      >
                      <el-link
                        icon="delete"
                        :underline="false"
                        type="danger"
                        style="margin: 0 15px"
                        @click="del(row.id)"
                        >删除</el-link
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                :total="totals"
                @update:current-page="handleCurrentPageUpdate"
                @update:page-size="handlePageSizeUpdate"
              ></pagination>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <dictItemDialog
      v-if="dialogVisible"
      v-model:dialogVisible="dialogVisible"
      :dict-update-id="dictUpdateId"
      @dict-change="getdict"
    ></dictItemDialog>
  </div>
</template>

<script setup lang="ts">
import {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  ref,
  reactive,
  onBeforeMount,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  toRaw
} from 'vue'
import tool from '@utils/tool'

import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

import { dictPage, dictDel } from '@api/dict_item'
import { dictTypeAll } from '@api/dicts'

import { IDictForm, IListInfo } from '@interface/dict_item'
import { IDictTypeAll } from '@interface/dict'

import dictItemDialog from './dictItemDialog.vue'

//控制dialog显示
const dialogVisible = ref<boolean>(false)
const dictUpdateId = ref('')

const state = reactive({
  dictForm: <IDictForm>{
    current: 1,
    size: 10,
    typeId: '',
    k: '',
    v: ''
  },
  dictList: [] as IListInfo[],
  totals: 0,
  dictTypeList: [] as IDictTypeAll[]
})

const { dictForm, dictList, totals, dictTypeList } = toRefs(state)

onBeforeMount(async () => {
  const { proxy } = getCurrentInstance() as ComponentInternalInstance
  if (proxy) {
    ;(proxy as any).getDicts(['system_dict_type'])
  }
  getdictTypeAll()

  getdict()
})

const getdictTypeAll = async () => {
  const { data } = await dictTypeAll()
  dictTypeList.value = data
}

const getdict = async () => {
  const res = await dictPage(dictForm.value)
  const { records } = res.data
  totals.value = res.total
  dictList.value = records
}

//分页-页码
const handleCurrentPageUpdate = (page: number) => {
  dictForm.value.current = page
  getdict()
}
//分页-一页显示多少条
const handlePageSizeUpdate = (page: number) => {
  dictForm.value.size = page
  getdict()
}

//新增|编辑
const btnUserDialog = (id: string) => {
  if (typeof id == 'string') {
    dictUpdateId.value = id
  } else {
    dictUpdateId.value = ''
  }
  dialogVisible.value = true
}

const del = (id: string) => {
  ElMessageBox.confirm('是否删除字典', {
    type: 'error',
    confirmButtonText: '删除',
    cancelButtonText: '取消'
  })
    .then(async () => {
      const res = await dictDel(id)
      if (res.code != '200') return
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      getdict()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
//重置
const resetForm = () => {
  dictForm.value = {
    current: 1,
    size: 10,
    typeId: '',
    k: '',
    v: ''
  }
  getdict()
}

//时间戳转换为标准时间
const rendererDateTime = (row, column, timeValue: number) => {
  return tool.dateFormat(timeValue)
}
</script>
